<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>无忧微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>
	<body class="bg">
		<div class="m-coupon">
			<h3 class="header f-pr">
				<span>我的卡券</span>
				<i class="icon-angle-left f-pa"></i>
			</h3>
			<div class="tabs clearfix">
				<a class="tab cur" data-id="1"><span>未使用</span></a>
				<a class="tab" data-id="2"><span>已使用</span></a>
			</div>
			<div id="item1">
				<ul class="unuse"></ul>
				<div class="nodata hide">
					<p class="img"><img src="../images/nodata-2.png"></p>
					<p class="text">暂无优惠券</p>
					<!-- <a class="refresh">刷新</a> -->
				</div>
			</div>
			<div id="item2" class="hide">
				<ul class="used"></ul>
				<div class="nodata hide">
					<p class="img"><img src="../images/nodata-2.png"></p>
					<p class="text">暂无优惠券</p>
					<!-- <a class="refresh">刷新</a> -->
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>

		<script type="text/javascript">
			mui.plusReady(function(){
				var user = plus.storage.getItem('user_id');
				mui.ajax(base + 'account/unusedcoupon', {
					type: 'get',
					data: {'user': user},
					dataType: 'json',
					headers: sign(md5),
					success: function(data){
						console.log('未使用优惠券：'+JSON.stringify(data));
						var list = data.list, result = '';
						if(list.length > 0){
							for(var i = 0, len = list.length; i < len; i++){
								result += '<li data-id="' + list[i].id + '">';
								result += '<div class="left f-fl">';
								result += '<p>' + list[i].value + '</p><p>' + list[i].type + '</p></div>';
								result += '<div class="right">';
								result += '<p>来源：' + list[i].source + '</p><p>备注：' + list[i].remark + '</p><p>到期时间：' + list[i].expiration + '</p></div>';
								result += '</li>'; 
							}
							$('#item1 ul').html(result);
						}else{
							$('#item1 .nodata').removeClass('hide');
						}
					},
					error: function(data){
						console.error(data.message);
					}
				});

				mui.ajax(base + 'account/usedcoupon', {
					type: 'get',
					data: {'user': user},
					dataType: 'json',
					headers: sign(md5),
					success: function(data){
						console.log('已使用优惠券：'+JSON.stringify(data));
						var list = data.list, result_1 = '';
						if(list.length > 0){
							for(var i = 0, len = list.length; i < len; i++){
								result_1 += '<li data-id="' + list[i].id + '">';
								result_1 += '<div class="left f-fl">';
								result_1 += '<p>' + list[i].value + '</p><p>' + list[i].type + '</p></div>';
								result_1 += '<div class="right">';
								result_1 += '<p>来源：' + list[i].source + '</p><p>备注：' + list[i].remark + '</p><p>使用时间：' + list[i].use_date_time+ '</p></div>';
								result_1 += '</li>'; 
							}
							$('#item2 ul').html(result_1);
						}else{
							$('#item2 .nodata').removeClass('hide');
						}
					},
					error: function(data){
						console.error(JSON.stringify(data));
					}
				});
				
				$('.m-coupon .tabs .tab').on('tap', function(){
					var that = $(this), id = parseInt($(this).attr('data-id'));
					if(!(that.hasClass('cur'))){
						that.addClass('cur').siblings('.tab').removeClass('cur');
			
						for(var i = 1; i <= 2; i++){
							if(i == id){
								$('#item' + i).removeClass('hide');
							}else{
								$('#item' + i).addClass('hide');
							}
						}
					}
				});
				
				$('.icon-angle-left').on('tap', function(){
					mui.back();
				});
			});
		</script>
	</body> 
</html>